<template>
	<view class="box">
		<view class="mian"></view>
		<view class="mian"></view>
		<view class="mian"></view>
		<view class="mian"></view>
		<view class="mian"></view>
		<view class="mian"></view>
		<view class="quan"></view>
	</view>
</template>

<script>
	export default {
		name: "top-box",
		data() {
			return {

			};
		}
	}
</script>

<style scoped>
	.box {
		width: 600rpx;
		height: 600rpx;
		margin: 0 auto;
		/* border: 5rpx solid gray; */
		transform-style: preserve-3d;
		position: relative;
		transform: rotateY(30deg) rotateX(30deg);
		animation: run 5s linear infinite;
		border-radius: 50%;
	}

	@keyframes run {
		0% {
			transform: rotateY(0deg) rotateX(10deg);
		}

		50% {
			transform: rotateY(180deg) rotateX(10deg);
		}

		100% {
			transform: rotateY(360deg) rotateX(10deg);
		}
	}

	.box .mian {
		width: 200rpx;
		height: 200rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -100rpx;
		margin-top: -100rpx;
		line-height: 200rpx;
		text-align: center;
		font-size: 50rpx;
		color: whitesmoke;
		/* opacity: 0.5; */
	}

	.box .mian:nth-child(1) {
		/* background: #F44336; */
		background: url('/static/blindbox/top-box/2.png') no-repeat;
		background-size: 100% 100%;
		transform: translateZ(100rpx);
	}

	.box .mian:nth-child(2) {
		/* background: #9C27B0; */
		background: url('/static/blindbox/top-box/1.png') no-repeat;
		background-size: 100% 100%;
		transform: translateX(-100rpx) rotateY(-90deg);
	}

	.box .mian:nth-child(3) {
		background: url('/static/blindbox/top-box/tou.png') no-repeat;
		background-size: 100% 100%;
		transform: translateY(-100rpx) rotateX(90deg);
	}

	.box .mian:nth-child(4) {
		background: url('/static/blindbox/top-box/3.png') no-repeat;
		background-size: 100% 100%;
		transform: translateY(100rpx) rotateX(-90deg);
	}

	.box .mian:nth-child(5) {
		background: url('/static/blindbox/top-box/1.png') no-repeat;
		background-size: 100% 100%;
		transform: translateX(100rpx) rotateY(90deg);
	}

	.box .mian:nth-child(6) {
		background: url('/static/blindbox/top-box/2.png') no-repeat;
		background-size: 100% 100%;
		transform: translateZ(-100rpx);
	}

	.quan {
		width: 600rpx;
		height: 600rpx;
		/* border: 5rpx solid gray; */
		border-radius: 50%;
		position: absolute;
		top: 0;
		left: 0;
		transform: rotatex(90deg);
		background: url('/static/blindbox/top-box/quan.png') no-repeat;
		background-size: 100% 100%;
	}
</style>
